<template>
	<view class="container">
		<s-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></s-skeleton>
		<view class="header-box s-skeleton">
			<view class="user-box s-skeleton-rect">
				<view class="user-info-box" @click="userDetail()">
					<view class="image-box">
						<image src="@/static/images/user/user.jpg"></image>
					</view>
					<view class="user-info">
						<view class="user-name">小叮当</view>
						<view class="user-status">
							<s-icon name="circle-fill" size="22" color="#4FA0FB"></s-icon>
							<!-- <view class="no">未认证</view> -->
							<view class="yes">已认证</view>
						</view>
					</view>
				</view>
				<view class="user-operation" @click="userInfo()">
					<view class="operation-info">
						查看/编辑资料
					</view>
					<s-icon name="arrowright" :size="22" color="#42454E"></s-icon>
				</view>
			</view>
			<view class="love-list s-skeleton-rect">
				<view class="love-item">
					<view class="item-sum">2</view>
					<view class="item-text">我喜欢的</view>
				</view>
				<view class="love-item">
					<view class="item-sum">2</view>
					<view class="item-text">喜欢我的</view>
				</view>
				<view class="love-item">
					<view class="item-sum">2</view>
					<view class="item-text">最近来访</view>
				</view>
			</view>
		</view>
		<view class="list-box">
			<s-list-view title="常用功能" class="s-skeleton-rect">
				<s-list-cell @click="detail" :arrow="true">
					<view class="s-item-box">
						<c-icon name="tuijianren" :size="22" color="#ff7900"></c-icon>
						<text class="s-list-cell_name">推荐给好友</text>
					</view>
				</s-list-cell>
				<s-list-cell @click="detail" :arrow="true">
					<view class="s-item-box">
						<s-icon name="kefu" :size="24" color="#ff7900"></s-icon>
						<text class="s-list-cell_name">帮助与客服</text>
					</view>
				</s-list-cell>
			</s-list-view>
		</view>
		
		<s-footer :fixed="false" class="s-custom"></s-footer>
	</view>
</template>

<script>
	export default {
		components:{}, 
		data() {
			return {
				skeletonShow: true
			}
		},
		onLoad() {
			setTimeout(() => {
				this.skeletonShow = false
			}, 1800);
		},
		methods: {
			detail(){
				console.log(111)
			},
			userInfo(){
				uni.navigateTo({url: '../userInfo/userInfo'})
			},
			userDetail(){
				uni.navigateTo({url: '../userDetail/userDetail'})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "user.scss";
</style>
